@import 'tailwindcss';

@config '../tailwind.config.js';

@utility text-shadow {
  text-shadow: 0.03125em 0.03125em 0px black;
}

@layer base {
  :root {
    @apply bg-black;
  }
  body {
    @apply overflow-x-clip overflow-y-scroll overscroll-none;
  }
  a,
  button {
    @apply cursor-pointer;
  }
  #__waku {
    @apply bg-gray-950;
    opacity: 0;
    animation: fadeIn cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards !important;
    animation-delay: 0.7s;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  *::-webkit-scrollbar {
    @apply h-full w-4 bg-gray-950;
  }
  *::-webkit-scrollbar-track {
    @apply bg-gray-950;
  }
  *::-webkit-scrollbar-thumb {
    @apply rounded-2xl border-4 border-solid border-gray-950 bg-gray-600;
  }
  *::-webkit-scrollbar-button {
    @apply hidden;
  }
  *:focus {
    @apply outline-hidden!;
  }
  :focus:not(:focus-visible) {
    @apply outline-hidden!;
  }
  ::selection {
    @apply bg-primary text-black;
  }
  .code + .code {
    @apply -mt-8!;
  }
}
